<template>
    <div class="shortcut" :title="shortcut.name" @dblclick="openWindow">
        <div class="icon">
            <img :src="shortcut.icon" alt="图标" />
        </div>
        <div class="name" v-text="shortcut.name"></div>
    </div>
</template>

<script setup lang="ts">
import { useWindowStore } from '@/store/window';

// 创建store对象
const windowStore = useWindowStore();

const props = defineProps({
    shortcut: {
        type: Object,
        default: null,
    },
});

// 双击
const openWindow = () => {
    windowStore.push({
        id: new Date().getTime() + '',
        icon: props.shortcut.icon,
        title: props.shortcut.name,
        url: props.shortcut.url,
    });
};
</script>

<style scoped lang="less">
.shortcut {
    height: 70px;
    width: 70px;
    margin: 5px;
    box-sizing: border-box;
    border: 1px solid @dps-color-black-0;
    padding: 3px;
    transition: all 100ms;
    position: relative;

    .icon {
        height: 40px;
        width: 40px;
        margin: 0 auto;
        background-color: @dps-color-white;

        img {
            height: 100%;
            width: 100%;
        }
    }

    .name {
        width: 60px;
        text-align: center;
        font-size: @dps-font-size-base;
        color: @dps-color-light-gray; // 快捷方式文字颜色
        margin: 5px auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.shortcut:hover {
    border: 1px solid @dps-color-light-gray-30;
    background-color: @dps-color-light-gray-15;
}
</style>
